<template>
  <div class="layoutPage">
    <!-- 创建框架 -->
    <el-container>
      <!-- 顶栏 -->
      <el-header>
        <!-- logo -->
        <img src="@/assets/barLogo.png" alt="logo" height="36px" />
        <!-- 用户信息 -->
        <div class="user">
          <div class="info">
            <img src="@/assets/userImage.png" alt="Avatar" />
            <p>欢迎您，{{ $store.state.user.username }}</p>
          </div>
          <el-tooltip
            class="logout"
            effect="dark"
            content="退出登录"
            placement="bottom"
          >
            <p @click="logout">退出<i class="el-icon-caret-bottom"></i></p>
          </el-tooltip>
        </div>
      </el-header>
      <!-- 下框 -->
      <el-container>
        <!-- 侧栏 -->
        <el-aside width="167px">
          <!-- 创建菜单 -->
          <el-menu
            class="layoutPageMenu"
            router
          >
            <el-menu-item index="/home" route="/home">
              <i class="iconfont icon-home"></i>
              <span slot="title">帝可得</span>
            </el-menu-item>
            <el-submenu index="/task">
              <template slot="title">
                <i class="iconfont icon-task"></i>
                <span>工单管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/task/business" route="/task/business">运营工单</el-menu-item>
                <el-menu-item index="/task/pperation" route="/task/peration">运维工单</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="/node">
              <template slot="title">
                <i class="iconfont icon-gps"></i>
                <span>点位管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/node/region" route="/node/region">区域管理</el-menu-item>
                <el-menu-item index="/node/node" route="/node/node">点位管理</el-menu-item>
                <el-menu-item index="/node/partner" route="/node/partner">合作商管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="/vm">
              <template slot="title">
                <i class="iconfont icon-vm"></i>
                <span>设备管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/vm/index" route="/vm/index">设备管理</el-menu-item>
                <el-menu-item index="/vm/status" route="/vm/status">设备状态</el-menu-item>
                <el-menu-item index="/vm/type" route="/vm/type">设备类型管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="/user">
              <template slot="title">
                <i class="iconfont icon-user"></i>
                <span>人员管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/user/index" route="/user/index">人员列表</el-menu-item>
                <el-menu-item index="/user/user-task-stats" route="/user/user-task-stats">人效统计</el-menu-item>
                <el-menu-item index="/user/user-work" route="/user/user-work">工作量列表</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="/sku">
              <template slot="title">
                <i class="iconfont icon-sku"></i>
                <span>商品管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/sku/sku-class" route="/sku/sku-class">商品类型</el-menu-item>
                <el-menu-item index="/sku/sku" route="/sku/sku">商品管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item index="/policy/index" route="/policy/index">
              <i class="iconfont icon-policy"></i>
              <span slot="title">策略管理</span>
            </el-menu-item>
            <el-menu-item index="/order/index" route="/order/index">
              <i class="iconfont icon-order"></i>
              <span slot="title">订单管理</span>
            </el-menu-item>
            <el-menu-item index="/report/index" route="/report/index">
              <i class="iconfont icon-report"></i>
              <span slot="title">对账统计</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <!-- 内容显示 -->
        <el-main>
          <!-- 显示路由 -->
          <div class="appS">
            <transition name="fade-transform" mode="out-in">
              <router-view />
            </transition>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// 引入请求数据
export default {
  methods: {
    // 登出方法
    logout () {
      this.$store.commit('user/tokenDel')
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="scss" scoped>
// 页面框架
.layoutPage {
  .el-header {
    // 头部 Bar
    height: 60px;
    // 水平居中 并且左右分开
    display: flex;
    align-items: center;
    justify-content: space-between;
    // 设置内间距
    padding: 0 0 0 15px;
    // 设置背景图片
    background-image: url("@/assets/topBar.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    // 设置字体颜色
    color: #fff;
    .user {
      // 用户信息
      // 打开 flex 布局
      display: flex;
      height: 100%;
      .info {
        // 打开 flex 布局并且水平对齐
        display: flex;
        align-items: center;
        // 右边距
        img {
          // 定宽图像
          width: 35px;
          height: 35px;
          // 圆角
          border-radius: 35px;
          // 右边距
          margin-right: 13px;
        }
      }
      .logout { // 登出样式
        margin: 0 32px;
        line-height: 60px;
        cursor: pointer;
      }
    }
  }
  .el-container {
    height: 100vh;
    overflow: hidden;
    // 菜单部分
    .el-menu {
      width: 167px;
      height: 100%;
      overflow: hidden scroll;
      border: none;
      ::v-deep .el-submenu__title {
        &:hover, &:focus {
          background-color: transparent;
        }
      }
      ::v-deep .el-menu-item-group__title{
        padding: 0 !important;
      }
      .el-menu-item { // 菜单每一项
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 0 0 0 51px;
        &:hover, &:focus {
          background-color: transparent;
        }
      }
      .iconfont { // 菜单图标
        margin-right: 16px;
        color: #000;
      }
      .el-menu-item-group {
        .el-menu-item {
          color: #999
        }
      }
      .is-active {
        color:  #5f84ff !important;
      }
      .el-submenu.is-active ::v-deep .el-submenu__title{
        color:  #5f84ff !important;
        i {
        color:  #5f84ff !important;

        }
      }
    }
    // 路由显示部分
    .el-main {
      // 设置背景色
      background-color: #f8fafd;
      // 设置显示区域最小宽度
      .appS {
        min-width: 1158px;
        min-height: 100%;
        overflow: auto auto;
      }
    }
  }
}
</style>
